<template>
    <el-dialog v-model="show" title="详情" width="35%" align-center @close="handleClose">

        <el-row :gutter="20">
            <el-col :span="12">
                品名规格：{{ props.initList.specsDetail }}
            </el-col>
            <el-col :span="12">
                采购单号：{{ props.initList.purchaseOrderCode }}
            </el-col>
            <el-col :span="12">
                供应商：{{ props.initList.supplyFactoryName }}
            </el-col>
            <el-col :span="12">
                申请数量：{{ props.initList.number }}{{ getUnitLabel(props.initList.purchaseUnit) }}
            </el-col>
            <el-col :span="12">
                单价：{{ props.initList.purchasePrice }}元/{{ getUnitLabel(props.initList.purchaseUnit) }}
            </el-col>
            <el-col :span="12">
                已入库数量：{{ props.initList.inNumber }}{{ getUnitLabel(props.initList.auxiliaryUnit) }} 计：{{ (Number(
                    props.initList.inNumber) / Number(props.dataList.targetNumber)).toFixed(2) }}{{
                    getUnitLabel(props.initList.purchaseUnit) }}
            </el-col>
            <el-col :span="12">
                采购备注：{{ props.initList.remark }}
            </el-col>
            <el-col :span="12">
                剩余到货数量：{{ props.dataList.surplusNumber }}{{ getUnitLabel(props.initList.auxiliaryUnit) }}
            </el-col>
            <el-col :span="24">
                审批备注：{{ props.initList.approvalRemark }}
            </el-col>
            <el-col :span="12">
                所属公司：{{ props.initList.companyName }}
            </el-col>
            <el-col :span="12">
                入库状态：{{ props.initList.inStatus == '0' ? '未入库' : props.initList.inStatus == '1' ? '部分入库' : '已入库' }}
            </el-col>
        </el-row>


        <div class="container">
            <div v-for="item in props.dataList.dataList" :key="item.id">
                <div class=" flex-s-s mb20">
                    <div>入库信息</div>
                    <!-- <div >已付款</div> -->
                </div>

                <div class="value">
                    入库时间：{{ item.createTime }}
                </div>
                <div class="value">
                    操作人：{{ item.updateByName }}
                </div>
                <div class="value">
                    入库数量：{{ item.inNumber }}{{ getUnitLabel(item.inUnit) }} 计 {{ item.calNumber }}{{
                        getUnitLabel(item.calUnit) }}
                </div>

                <div class="flex-s-s">
                    <div class="value">
                        入库金额：{{ item.inAmount }} 元
                    </div>
                    <div class="value">
                        入库编号：{{ item.purchaseChildrenCode }}
                    </div>
                </div>
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <!-- <el-button @click="handleClose">取 消</el-button> -->
                <el-button type="primary" @click="handleClose">确 认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = defineProps(['visible', 'initList', 'dataList']);
const emits = defineEmits(['submit', 'close']);
const { unit_enumeration } = toRefs(proxy?.useDict('unit_enumeration'));


const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const handleClose = () => {
    emits('close');
};

// 辅助函数获取单位标签
const getUnitLabel = (unitValue: string): string => {
    const unit = unit_enumeration.value?.find((item: any) => item.value === unitValue);
    return unit?.label || '';
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.el-col {
    margin-bottom: 20px;
    font-weight: 700;
}

.container {
    width: 100%;
    height: 200px;
    overflow-x: auto;
}

.flex-s-s {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-weight: 700;
    color: #000;
}

.value {
    color: #A7A7A7;
    margin-bottom: 10px;
    font-weight: 300;
}
</style>